<template>
  <div class="deposit_bar">
    <img src="/assets/images/deposit1.png" alt="" />
    <div class="deposit_bar__content">公告：未满18岁的未成年人请勿消费</div>
  </div>
  <div class="deposit_bar_large">
    <img src="/assets/images/deposit2.png" alt="" />
    <div class="deposit_bar_large__title">
      <span>账户余额：￥ {{ business.money }}</span>
    </div>
  </div>
  <div class="deposit_bar_large">
    <img src="/assets/images/deposit2.png" alt="" />
    <div class="deposit_bar_large__title">
      <span>用户：{{ business.nickname }}</span>
    </div>
  </div>

  <van-divider
    :style="{ color: '#1989fa', borderColor: '#1989fa', padding: '0 16px' }"
    >分割线</van-divider
  >

  <van-form class="form" @submit="OnPay">
    <van-field
      v-model="money"
      label="充值金额"
      name="money"
      placeholder="请填写充值金额"
      left-icon="gold-coin-o"
      required
      :rules="[{ required: true, message: '请填写充值金额' }]"
      @focus="NumberKeyboardShow = true"
    />

    <van-field
      v-model="pay.text"
      is-link
      readonly
      required
      name="pay"
      label="支付方式"
      placeholder="选择支付方式"
      left-icon="other-pay"
      @click="PayShow = true"
    />

    <van-popup v-model:show="PayShow" position="bottom">
      <van-picker
        :columns="PayList"
        @confirm="OnPayConfirm"
        @cancel="PayShow = false"
      />
    </van-popup>

    <div class="button">
      <van-button
        round
        block
        color="linear-gradient(160deg, #0093E9 0%, #80D0C7 100%)"
        native-type="submit"
      >
        立即充值
      </van-button>
    </div>
  </van-form>

  <van-number-keyboard
    @input="PayInput"
    :show="NumberKeyboardShow"
    close-button-text="完成"
    @close="OnClose"
    @blur="NumberKeyboardShow = false"
    @delete="OnDelete"
  />
</template>

<script setup>
// this代理
const { proxy } = getCurrentInstance();
// 用户数据
const business = proxy.$business;
// 充值金额
const money = ref("");
// 数字键盘
const NumberKeyboardShow = ref(false);
// 支付弹出层
const PayShow = ref(false);
// 充值方式列表
const PayList = ref([
  { text: "支付宝", value: "zfb" },
  { text: "微信", value: "wx" },
]);
// 默认支付方式
const pay = ref(PayList.value[0]);

// 确认选择支付方式
const OnPayConfirm = ({ selectedOptions }) => {
  // 获取已选择的方式
  let option = selectedOptions[0] ?? "";
  // 如果没选
  if (!option) {
    return;
  }
  pay.value = option;
  // 关闭弹出层
  PayShow.value = false;
};

// 数字键盘的输入
const PayInput = (values) => (money.value += values);

// 关闭数字键盘
const OnClose = () => {
  NumberKeyboardShow.value = false;
};

// 数字键盘的回退
const OnDelete = () => {
  // 判断输入的金额是否为空
  if (money.value.length === 0) {
    money.value = "";
    return;
  }
  // 删除最后一个字符
  money.value = money.value.slice(0, -1);
};

// 提交支付
const OnPay = () => {
  // 判断充值金额是否不小于0
  if (parseFloat(money.value.trim()) <= 0) {
    return;
  }
  // 弹出确认框
  proxy
    .$confirm({
      title: "充值",
      message: `是否确认充值 ${money.value} 元到该账户？`,
    })
    .then(async () => {
      // 组装参数
      const params = {
        busid: business.value.id,
        money: money.value.trim(),
        type: pay.value.value,
      };
      // 发起请求
      const result = await proxy.$http.post({
        url: "/business/pay",
        params,
      });
      // 处理请求结果
      if (result.code === 1) {
        // 跳转收银台
        proxy.$router.push({
          path: "/business/cashier",
          query: { payid: result.data.id },
        });
      } else {
        proxy.$fail(result.msg);
      }
    })
    .catch(() => {});
};
</script>

<style scoped>
@import url("/assets/css/BusinessPay.css");
</style>